<!DOCTYPE html>
<html lang="en">


<!-- 问题1、点击修改后，怎么把修改后的数据添加到点击过的对象里
问题2、搜索功能未完善
问题3、删除对象后怎么把编号按顺序排 -->

<head>
    <!-- 指定页面的编码格式 -->
    <meta charset="UTF-8">
    <!-- 让低版本的IE浏览器采用最高标准 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 当前页面可以根据移动设备的尺寸改变 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../css/sweetAlert2.css">
    <link rel="stylesheet" href="../css/stu.css">
    
    <style>
        table,
        th {
            text-align: center;
            font-size: 22px;
        }

        .panel-title>span {
            font-size: 25px;
            font-weight: bold;
        }
        .del{
            display: none;
            
        }
        #sel {
            text-align: left;
        }

        #sel>input {
            width: 100px;
        }

        #add {
            font-size: 22px;
            padding-left: 20px;
            padding-right: 20px;
            line-height: 20px;

        }

        #myModalLabel {
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部面板，包含搜索、标题等 -->
        <div class="panel panel-primary">
            <!-- 面板的头部 -->
            <div class="panel-heading">
                <!-- 头部中的标题 -->
                <div class="panel-title">
                    <span>学生管理</span>
                </div>
            </div>
            <!-- 头部中的搜索栏 -->
            <div class="panel-body">
                <form class="form-horizontal form-inline" id="tou">
                    <!-- 声明一个表单组 -->
                    <div class="form-group">
                        <!-- 声明提示信息 姓名： -->
                        <label class="control-label col-md-3">姓名:</label>
                        <!-- 声明右侧的控件 -->
                        <div class="col-md-1">
                            <!-- 声明输入控件 -->
                            <input type="text" class="form-control ">
                        </div>
                    </div>
                    <div class="form-group">
                        <!-- 密码： -->
                        <label class="control-label col-md-4">班级:</label>
                        <div class="col-md-1">
                            <input type="text" class="form-control ">
                        </div>
                    </div>
                    <div class="form-group">
                        <!-- 下拉列表 -->
                        <label class="control-label col-md-8">性别:</label>
                        <div class="col-md-3">
                            <!-- 列表框 -->
                            <select class="form-control">
                                <option value="-1">请选择</option>
                                <!--快捷方式 option[value=$]{$岁}*10 -->
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <!-- 按钮： -->
                        <div class=" col-md-offset-11 col-md-4">
                            <input type="button" class="btn btn-success" onclick="searh()" value="搜索">
                        </div>
                    </div>
                </form>
            </div>

        </div>
        <!-- 表格的主体内容 -->
        <table class="table table-striped table-bordered  table-hover">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>班级</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
            <!-- 复制的模板 -->
            <tr id="template" style="display: none;" id="aaa">
                <td id="a"></td>
                <td id="b"></td>
                <td id="c"></td>
                <td id="d"></td>
                <td id="e"></td>
                <td>
                    <button class="btn btn-info btn-sm btn-default" data-toggle="tooltip" data-placement="top"
                        title="修改" type="button" onclick="show(2)">修改</button>
                    <input class="btn btn-danger btn-sm" type="button" value="删除" onclick="del(this)">
                </td>
            </tr>
            <!-- 模板 -->
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>D118</td>
                <td>90</td>
                <td>
                    <button class="btn btn-info btn-sm btn-default" data-toggle="tooltip" data-placement="top"
                        title="修改" type="button" onclick="show(2),update(this)">修改</button>
                    <input class="btn btn-danger btn-sm" type="button" value="删除" onclick="del(this)">
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>小芳</td>
                <td>女</td>
                <td>D118</td>
                <td>100</td>
                <td>
                    <button class="btn btn-info btn-sm" type="button" onclick="show(2),update(this)">修改</button>
                    <input class="btn btn-danger btn-sm" type="button" onclick="del(this)" value="删除">
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>小刘</td>
                <td>男</td>
                <td>D117</td>
                <td>94</td>
                <td>
                    <button class="btn btn-info btn-sm" type="button" onclick="show(2),update(this)">修改</button>
                    <input class="btn btn-danger btn-sm" type="button" onclick="del(this)" value="删除">
                </td>
            </tr>
            <tr>
                <td colspan="6">
                    <a class="btn btn-success btn-sm btn-default" data-toggle="tooltip" data-placement="left" title="添加"
                        id="add" onclick="show(1)">+</a>
                </td>
            </tr>
        </table>
    </div>
    <!-- 表格的主体内容 -->


    <!-- 模态窗开始 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body" >
                    <form class="form-horizontal col-md-offset-3">
                        <!-- 声明一个表单组 -->
                        <div class="form-group">
                            <!-- 声明提示信息 姓名： -->
                            <label class="control-label col-md-2">姓名：</label>
                            <!-- 声明右侧的控件 -->
                            <div class="col-md-6">
                                <!-- 声明输入控件 -->
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <!-- 班级： -->
                            <label class="control-label col-md-2">班级：</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <!-- 下拉列表 -->
                            <label class="control-label col-md-2">性别：</label>
                            <div class="col-md-6">
                                <!-- 列表框 -->
                                <select class="form-control">
                                    <!--快捷方式 option[value=$]{$岁}*10 -->
                                    <option value="-1">请选择</option>
                                    <!--快捷方式 option[value=$]{$岁}*10 -->
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <!-- 成绩： -->
                            <label class="control-label col-md-2">成绩：</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <!-- 按钮： -->
                            <div id="f" class=" col-md-offset-3 col-md-6">
                                <input type="button" class="btn btn-success" data-dismiss="modal" id="newadd" value="提交">

                                <input type="reset" class="btn btn-primary" value="重置">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态窗结束 -->
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/sweetalert2.all.js"></script>
    <script>
        $(function(){
            let i=4;
            //给提交按钮绑定事件，添加到末尾
            $("#newadd").click(function(){

                // /判断当前按钮的功能是添加还是修改
                //只有当值是提交才会增加
                if($("#newadd").val()=='提交'){

                
               //赋值模板行,并追加到添加按钮的前面
                //将编号加1
                // $("#myModal input:last").click();
                $("#a").html(i);
                $("#b").html($(" #myModal input:eq(0)").val());

                $("#c").html($(" #myModal option:checked").html());
                $("#d").html($(" #myModal input:eq(1)").val());
                $("#e").html($(" #myModal input:eq(2)").val());
                $("#template").clone().removeProp("style").insertBefore("tr:last");
                $("#myModal input:last").click();
                new swal(
                        '已添加!',
                        '学生信息保存成功！',
                        'success'
                    )
                i++;
                }
            });



        });
            //修改信息
            function update(index){
                //获取当前学生的信息显示在修改栏
                $(" #myModal input:eq(0)").val(($(index).parent().prev().prev().prev().prev().html()));
                $(" #myModal input:eq(1)").val(($(index).parent().prev().prev().html()));
                $(" #myModal input:eq(2)").val(($(index).parent().prev().html()));
                // if($("#newadd").val()=='修改'){
                //     $(index).parent().prev().prev().prev().prev().html(123);
                // }
                

            }

        //搜索
        function searh(){
            //获取搜索框的值
           let name=$("#tou input:eq(0)").val();
           //班级
           let ban=$("#tou input:eq(1)").val();
           //性别
           let sex=$("#tou option:checked").text();
          

           let arrs=$("tr:gt(2)");
        //    alert(arrs.length)
        //    alert($("td:eq(1)").text());
        //    alert($(" tr:eq("+4+") td:eq(1)").text())
           for(let i=2;i<arrs.length+2;i++){
           
                if(name==$(" tr:eq("+i+") td:eq(1)").text()){
                    $(" tr:eq("+i+")").show()
                   
                }else{
                    $("tr:gt(1)").addClass("del");
                }
               
           }  
        }



        function show(op) {
            if (op == 1) {
                $("#myModalLabel").html("新增学员信息");
                $("#newadd").val("提交");
            } else {
                $("#myModalLabel").html("修改学员信息");
                $("#newadd").val("修改");
            }
            $('#myModal').modal("show");
        }


        function del(obj) {
            new swal({
                title: '你确定吗?',
                text: "数据删除将无法恢复!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '是的，删除它!',
                cancelButtonText: '取消，我再想想!'
            }).then((result) => {
                if (result.value) {
                    obj.parentElement.parentElement.remove();
                    new swal(
                        '删除!',
                        '数据删除成功！',
                        'success'
                    )
                } else {
                    new swal(
                        '取消!',
                        '数据未删除！',
                        'error'
                    );
                }
            });
        }
    </script>
</body>

</html>